<template>
  <div>
    <div class="title">
      <ul>
        <li @click="GetBack">
          <img src="../../assets/images/goback.png" alt="" />
        </li>
        <li>账号管理</li>
      </ul>
    </div>
     <!-- 用户名 -->
     <div class='my-name'>
         <div >用户名</div>
         <div><img src="../../assets/images/next.png" alt="" /></div>
         <div>未设置</div>
     </div>
       <!-- 手机号 -->
      <div class='my-name'>
         <div>手机号</div>
         <div><img src="../../assets/images/next.png" alt="" /></div>
         <div>未绑定</div>
     </div>
      <!-- 邮箱 -->
    <div class='my-name'>
         <div>邮箱</div>
         <div><img src="../../assets/images/next.png" alt="" /></div>
         <div>未绑定</div>
     </div>
      <!-- 修改密码 -->
       <div class='my-name'>
         <div>修改密码</div>
         <div><img src="../../assets/images/next.png" alt="" /></div>
        
     </div> 

  </div>
</template>

<script>
export default {
  name: "account",
  methods: {
    GetBack() {
      this.$router.push("/set");
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 50px;
  background-color: white;
}
ul {
  width: 100%;
}
ul li {
  float: left;
}

ul li:nth-child(1) {
  width: 19px;
  margin-left: 2%;
  margin-top: 3%;
  margin-bottom: 5%;
}
ul li:nth-child(2) {
  margin-left: 37%;

  font-size: 19px;

  line-height: 50px;
}
.my-name{
    width:100%;
    height:60px;
    background-color: white;
    margin-top:1px
}
.my-name div:nth-child(1){
    float: left;
  margin-left: 5%;
  line-height: 60px;
  font-size: 20px;
}
.my-name div:nth-child(2){
 float: right;
  width:24px;
  margin-right: 3%;
  margin-top:4%;

}
.my-name div:nth-child(3){
 float: right;
 line-height: 60px;
 margin-right: 2%;
 font-size: 20px;
}
</style>